import { Layout } from 'antd'
const { Content, Sider } = Layout
import './App.scss'
import AsideLeft from '@/pages/layout/asideLeft'
import { Outlet } from 'react-router-dom'
import { useEffect, useState } from 'react'
import { getPremissionRoutes as getPremissionRoutesApi } from '@/store/modules/userStore'
import { useDispatch } from "react-redux"

const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false)
  const dispatch: AppDispatch = useDispatch()

  const getPremissionRoutes = async () => {
    await dispatch(getPremissionRoutesApi())
  }
  useEffect(() => {
    getPremissionRoutes()
  },)
  return (
    <>
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
          <AsideLeft />
        </Sider>
        <Layout className="site-layout">
          <Content className="site-layout-background" style={{ margin: '16px', padding: '10px' }}>
            <Outlet></Outlet>
          </Content>
        </Layout>
      </Layout>
    </>
  )
}
export default App
